import React from 'react';
import {connect} from 'dva'
import {
    Card,
    Table,
    Divider,
} from 'antd';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import styles from './index.less';
import AddRemark from './AddRemark';
import {financialSettlementStatus, financialBusinessType} from "utils/enumConfig"

const doSettlementApplies4Payable = ({location, dispatch, doSettlement4Payable, loading}) => {
    const {Description} = DescriptionList;
    const {settlementApplies} = doSettlement4Payable;

    // 处理PageHeaderLayout
    const breadcrumbList = [
        {
            title: '财务管理',
            href: '/financialSettlementApply'
        }, {
            title: '财务结算',
            href: '/financialSettlementApply'
        }, {
            title: '生成收款单'
        }
    ];
    const pageProps = {
        breadcrumbList: breadcrumbList,
        title: '生成收款单'
    }

    // 处理结算金额信息
    const settlementMoneyColumns = [
        {
            title: '单据编号',
            dataIndex: 'orderId',
            key: 'orderId',
            render: (text, record, index) => (record.orderId)
        }, {
            title: '业务类型',
            dataIndex: 'businessType',
            key: 'businessType',
            render: (text, record, index) => (financialBusinessType[record.businessType])
        }, {
            title: '应收金额',
            dataIndex: 'amountReceivable',
            key: 'amountReceivable',
            render: (text, record, index) => (record.settlementType === "RECEIVABLE"
                ? record.settlementMoney.toFixed(2)
                : "——")
        }, {
            title: '应付金额',
            dataIndex: 'amountPayable',
            key: 'amountPayable',
            render: (text, record, index) => (record.settlementType === "PAYABLE"
                ? record.settlementMoney.toFixed(2)
                : "——")
        }
    ];

    // 处理商家用户信息
    let financialAccountName = "";
    let creatorName = "";
    if (settlementApplies && settlementApplies.length > 0) {
        financialAccountName = settlementApplies[0].financialAccountName;
        creatorName = settlementApplies[0].creatorName;
    }

    // 处理金额信息
    let amountReceivable = 0;
    let amountPayable = 0;
    let totalAmount = 0;
    if (settlementApplies && settlementApplies.length > 0) {
        // 计算总的应收金额
        let receivableApply = settlementApplies.filter((apply) => {
            return apply.settlementType === "RECEIVABLE";
        });
        _.each(receivableApply, (apply) => {
            amountReceivable += apply.settlementMoney;
        });
        // 计算总的应付金额
        let payableApply = settlementApplies.filter((apply) => {
            return apply.settlementType === "PAYABLE";
        });
        _.each(payableApply, (apply) => {
            amountPayable += apply.settlementMoney;
        });
        // 计算总金额
        totalAmount = Math.abs(amountReceivable - amountPayable);
    }

    const addRemarkProps = {
        doSettlement4Payable(values) {
            const applyIds = settlementApplies.map((apply) => {
                return apply.id
            });
            dispatch({
                type: 'doSettlement4Payable/payable',
                payload: {
                    remark: values.remark,
                    applyIds: applyIds
                }
            });
        }
    }

    return (
        <PageHeaderLayout {...pageProps}>
            <Card className={styles.card} bordered={false}>
                <DescriptionList
                    size="large"
                    title="基础信息"
                    style={{
                    marginBottom: 32
                }}>
                    <Description term="商家">{financialAccountName}</Description>
                    <Description term="联系人">{creatorName}</Description>
                    <Description term="结算类型">应付</Description>
                    <Description term="应收金额">{'¥ ' + amountReceivable.toFixed(2)}</Description>
                    <Description term="应付金额">{'¥ ' + amountPayable.toFixed(2)}</Description>
                    <Description term="总计">
                        {'¥ ' + totalAmount.toFixed(2)}<span>（应付）</span>
                    </Description>
                </DescriptionList>
                <Divider style={{
                    marginBottom: 32
                }}/>
                <div className={styles.title}>待结算申请单</div>
                <Table
                    style={{
                    marginBottom: 24
                }}
                    pagination={false}
                    bordered
                    dataSource={settlementApplies}
                    columns={settlementMoneyColumns}
                    rowKey="id"/>
                <Divider style={{
                    marginBottom: 32
                }}/>
                <div className={styles.title}>结算备注</div>
                <AddRemark {...addRemarkProps}/>
            </Card>
        </PageHeaderLayout>
    )
};

export default connect(({doSettlement4Payable, loading}) => ({doSettlement4Payable, loading}))(doSettlementApplies4Payable)
